<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>小说</title>
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/mui.css">
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	</head>

	<body>
		<div id="novel">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<div class="mui-title">
					<input type="search" v-model="search" name="search" class="drak-micro" placeholder="小说" value="" />
				</div>
			</header>
			<div class="mui-content">
				<ul class="mui-table-view" v-if="!searchState">
					<li class="mui-table-view-cell mui-media" v-for="item in data" @click="toDetail(item.bookname)">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" :src="item.book_cover">
							<div class="mui-media-body">
								{{item.bookname}}
								<p class='mui-ellipsis'>{{item.book_info}}</p>
							</div>
						</a>
					</li>
				</ul>
				<ul class="mui-table-view" v-if="searchState">
					<li class="mui-table-view-cell" v-for="item in searchList" @click="toDetail(item)">
						<a class="mui-navigate-right">
							{{item}}
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		mui.init();
		//		https://www.apiopen.top/novelApi
		var novel_data = new Vue({
			el: '#novel',
			data: function() {
				return {
					data: [],
					searchFun: '',
					search: '',
					searchList: [],
					searchState: false,
				}
			},
			created: function() {
				this.$nextTick(function() {
					var that = this;
					$.get('https://www.apiopen.top/novelApi').then(res => {
						console.log(res)
						if(res.code === 200) {
							res.data.forEach((e) => {
								that.data.push(e)
							})
						} else {
							mui.toast('拉取数据失败')
						}
					})
				})
			},
			methods: {
				searchF: function(name) {
					//					https://www.apiopen.top/novelSearchApi?name=
					var that = this;
					if(this.searchFun) {
						this.searchFun.abort();
					}
					this.searchFun = $.get('https://www.apiopen.top/novelSearchApi?name=' + name);
					this.searchFun.then((res) => {
						if(res.code == 200) {
							that.searchList = [];
							that.searchState = true;
							res.data.forEach(e => {
								that.searchList.push(e);
							})
						} else {
							mui.toast('没有找到数据');
						}
					});
				},
				toDetail:function(name){
					localStorage.setItem('novelDeatil',name);
					location.href="novelDeatil.html";
				}
			},
			watch: {
				search: function(n, o) {
					if(n) {
						novel_data.searchF(n);
					} else {
						novel_data.searchState = false;
					}

				}
			}
		})
	</script>

</html>